<template>
  <div class="friends">
    <!--标题-->
    <div class="friends1">
      <img @click="returns()" src="../../../assets/2.svg"/>
      <h3>我的好友</h3>
      <div>
        <router-link to="">
          <img src="../../../assets/1.svg" />
        </router-link>
      </div>
    </div>
    <!--内容-->
    <div class="friends2">
        <mt-search
          v-model="value"
          cancel-text="取消"
          placeholder="请输入关键字"
        >
        </mt-search>
      <mt-index-list>
        <mt-index-section index="A" class="friends2-p">
          <router-link to="">
            <mt-cell title="好友"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友1"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友2"></mt-cell>
          </router-link>
        </mt-index-section>
        <mt-index-section index="B" class="friends2-p">
          <router-link to="">
            <mt-cell title="好友"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友1"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友2"></mt-cell>
          </router-link>
        </mt-index-section>
        <mt-index-section index="C" class="friends2-p">
         <router-link to="">
            <mt-cell title="好友"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友1"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友2"></mt-cell>
          </router-link>
        </mt-index-section>
        <mt-index-section index="D" class="friends2-p">
          <router-link to="">
            <mt-cell title="好友"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友1"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友2"></mt-cell>
          </router-link>
        </mt-index-section>
        <mt-index-section index="E" class="friends2-p">
          <router-link to="">
            <mt-cell title="好友"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友1"></mt-cell>
          </router-link>
          <router-link to="">
            <mt-cell title="好友2"></mt-cell>
          </router-link>
        </mt-index-section>
      </mt-index-list>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    returns(){
      this.$router.back()
    }
  }
}
</script>
<style>
.friends {
  height: calc(100vh - 55px);
  box-sizing: border-box;
  text-align: center;
}
/*标题*/
.friends1 {
  height: 55px;
  line-height: 55px;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ccc;
}
.friends1 a {
  flex: 1;
  text-decoration: none;
}
.friends1 img {
  width: 20px;
  height: 20px;
  margin-top: 15px;
  margin-left: 15px;
}
.friends1 h3 {
  font-weight: normal;
  flex: 6;
}
.friends1 div {
  flex: 1;
  line-height: 55px;
  color: #797979;
}
.friends1 div a {
  text-decoration: none;
  color: #000;
}
.friends1 div img {
  width: 22px;
  height: 22px;
  margin-top: 10px;
  object-fit: cover;
}
/*内容*/
.friends2-p {
  text-align: left;
}
.friends2 a {
  text-decoration: none;
  color: #000;
}
.mint-search {
  width: 100%;
  height: 50px;
}
.mint-searchbar-inner {
  border: 1px solid #666666;
  border-radius: 25px;
}
.mint-searchbar {
  padding: 4px 10px;
}
.mint-searchbar-inner .mintui-search {
  font-size: 22px;
  color: #666666;
}
.mint-searchbar-core {
  font-size: 16px;
  text-align: center;
}
.mint-indexlist-nav {
  background-color: #ccc;
  border-radius: 25px;
}
.mint-indexlist-navitem {
  font-size: 20px;
}
.mint-cell-wrapper {
  background-image: linear-gradient(180deg, #6e6e6e, #6e6e6e 100%, transparent 100%);
  padding: 0;
}
.mint-cell-title {
  margin-left: 10px;
}
</style>
